<template>
<form class="signupform">
    <span class="label"
            v-text="Lang.user[itype][lang]">手机号码</span>
    <hb-input @ipt="e_form" :formType="itype" :back="itype" />

    <span class="label"
            v-text="Lang.formLabel[lang][5]">人机验证码</span>
    <div class="fcb">
        <hb-input class="imgcode ilbk" @ipt="e_form" formType="imgCode" back="imgvercode" />
        <img class="img"
                :src="imgCode"
                @click="api_getimg">
        </div>

        <span class="label"
            v-text="Lang.formLabel[lang][0]">验证码</span>
        <hb-vercode @ipt="e_form" @clk="e_send" formType="vercode" back="vercode" :iclear="clearCodeTimer" />

        <span class="label"
            v-text="Lang.formLabel[lang][1]">密码</span>
        <hb-signupPassword @ipt="e_form" />

        <span class="label"
            v-text="Lang.formLabel[lang][4]">推荐码</span>
        <hb-input @ipt="e_form" formType="recomCode" back="recomCode" :dvalue="dvalue" />

        <div class="readme flex">
            <input type="checkbox"
                id="agree"
                v-model="agree">
            <label for="agree"
                v-text="Lang.formLabel[lang][2]">我已阅读并同意</label>
            <span class="readmeLink cur"
                v-text="Lang.formLabel[lang][3]"
                @click="e_agree_">《用户协议》</span>
        </div>

        <hb-button :txt="Lang.button[lang]" @clk="e_signup" />

        <hb-dialog v-if="msgback !== ''" @clk="e_closeDialog" class="dialog">
            <h3 class="hmsg" v-text="msgback"></h3>
        </hb-dialog>

</form>
</template>

<script>
import Lang from './lang.js'
import {
    vpost,
    vlink
} from '@api'
export default {
    name: 'signupform',
    props: ['itype'],
    data() {
        return {
            Lang,
            form: {
                phone: '',
                email: '',
                vercode: '',
                password: '',
                recomCode: '',
                imgvercode: '',
                intro_user: '',
            },
            check: {
                phone: false,
                email: false,
                vercode: false,
                password: false,
                recomCode: true,
                imgvercode: false,
            },
            imgCode: '',
            msgback: '', // 返回的弹窗提示消息
            clearCodeTimer: -1, // 清空发送验证码的计时器
            agree: true, // 同意用户协议
            dvalue: '', // 通过路径传入的推荐码
        }
    },
    computed: {
        lang() {
            return this.$store.state.setting.lang
        },
    },
    mounted() {
        this.api_getimg()
        this.getInviteId()
    },
    methods: {
        getInviteId() {
            let tid = this.$route.params.n
            setTimeout(() => {
                this.dvalue = tid
                this.form.recomCode = tid
            }, 1000)
        },
        e_form(re, inputed, back) {
            this.check[back] = re
            this.form[back] = inputed
        },
        e_send() {
            if (this.check[this.itype] !== true) {
                // this.msgback = "请输入正确的手机号/邮箱地址"
                this.msgback = this.Lang.checkCode[this.lang][0]
                return false
            }
            if (this.check.imgvercode !== true) {
                this.msgback = this.Lang.checkCode[this.lang][1]
                return false
            }
            this.itype === 'phone' ? this.api_send() : this.emailSend()
            // this.api_send()
        },
        api_send() {
            let se = {
                type: 12,
                phone: this.form.phone,
                email: this.form.email,
                vcode: this.form.imgvercode,
            }
            vpost(vlink.checkCode.signup.phone, se).then(re => {
                this.msgback = re.msg
            })
        },
        emailSend() {
            let se = {
                type: 3,
                phone: this.form.phone,
                email: this.form.email,
                vcode: this.form.imgvercode,
            }
            vpost(vlink.checkCode.signup.email, se).then(re => {
                this.msgback = re.msg
            })
        },
        checkRe() {
            let b = this.check
            let re = (b.phone || b.email) && b.vercode && b.password && b.recomCode && b.imgvercode
            return re
        },
        e_signup() {
            let dmsg = this.Lang.down
            if (!this.checkRe()) {
                this.msgback = dmsg[this.lang][0]
                return false
            }
            if (!this.agree) {
                this.msgback = dmsg[this.lang][1]
                return
            }
            /*
                regType   	0手机、1邮箱
                regName	名称
            	password	登入密码
                intro_user	推荐码 （可选填）
      	        random  随机数 暂时没用到
                phoneCode	手机验证码
                eccode 	邮箱验证码
                vcode    	手动填写的页面验证码
            */
            let regType = this.itype === 'phone' ? '0' : '1'
            let toWhiteCodeName = this.itype === 'phone' ? 'phoneCode' : 'eccode'
            let box = this.form
            let setting = {
                regType: regType,
                regName: box.phone || box.email,
                password: box.password,
                intro_user: box.recomCode,
                vcode: box.imgvercode,
                ecode: box.vercode,
            }
            setting[toWhiteCodeName] = box.vercode
            vpost(vlink.user.signup, setting).then(re => {
                this.msgback = re.msg
                if (re.code === 0) {
                    setTimeout(() => {
                        this.signSuc_()
                    }, 2500)
                }
            })
        },
        api_getimg() {

            this.imgCode = ''
            setTimeout(() => {
                let r = (Math.random() * 100) | 0
                this.imgCode = vlink.checkCode.signup.img + r
            }, 10)
        },
        e_closeDialog() {
            this.msgback = ''
            this.clearCodeTimer = Math.random() * 5
        },
        signSuc_() {
            this.$router.push('/signin')
        },
        e_agree_() {
            this.$router.push('/useragree')
        },
    },
}
</script>

<style scoped>
.signupform {
    margin-top: 5px;
    margin-bottom: 40px;
}

.label {
    display: inline-block;
    margin: 15px 0 5px;
    font-size: 14px;
    color: #61688a;
}

.btnbox {
    margin-top: 40px;
    align-items: center;
}

.forget {
    margin-left: 30px;
}

.readme {
    margin: 40px 0;
    align-items: flex-start;
    line-height: 20px;
    font-size: 16px;
    color: var(--clr0);
    user-select: none;
}

.readmeLink {
    color: var(--clr1);
}

.imgcode {
    margin-right: 20px;
    flex-grow: 1;
}

.img {
    border-radius: 4px;
    height: 48px;
}

.dialog {
    color: var(--clr0);
}

.hmsg {
    padding: 0 20px;
}
</style>
